<template>
  <div style="background:#eee">
    <!-- 修改密码 -->
    <!-- 修改个人信息 -->
    <!-- 查看个人订单 -->
    <!-- 充值记录 -->
    <div class="user-center">
      <el-tabs class="border-card" type="border-card">
        <el-tab-pane label="修改个人信息">
          <el-form ref="form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="form.username" style="width:30%"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio v-model="form.gender" label="1">男</el-radio>
              <el-radio v-model="form.gender" label="0">女</el-radio>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="form.address" style="width:30%"></el-input>
            </el-form-item>
            <el-form-item label="积分">{{integral}} 分</el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认修改</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="修改密码">
          <el-form ref="form" label-width="80px">
            <el-form-item label="旧密码">
              <el-input v-model="form2.oldPwd" style="width:30%"></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input v-model="form2.newPwd" style="width:30%"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="revisePwd">确认修改</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="查看个人订单">
          <el-table :data="orderList" style="width: 100%">
            <el-table-column prop="bikeTitle" label="自行车名称"></el-table-column>
            <el-table-column prop="kind" label="类别"></el-table-column>
            <el-table-column prop="integral" label="所需积分"></el-table-column>
            <el-table-column prop="createdAt" label="下单时间"></el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                <div>
                  <el-button type="success" size="mini" v-show="scope.row.status === 0">租赁中</el-button>
                  <el-button type="success" size="mini" v-show="scope.row.status === 1">已还车</el-button>
                  <el-button type="danger" size="mini" v-show="scope.row.status === 2">已逾期</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="充值记录">
          <el-table :data="chargeList" style="width: 100%">
            <el-table-column prop="money" label="充值积分"></el-table-column>
            <el-table-column prop="adminId" label="充值人员ID"></el-table-column>
            <el-table-column prop="createdAt" label="充值时间"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {
  getUserInfo,
  saveUserInfo,
  revisePwd,
  getUserOrders,
  getUserRecharges
} from "../../../api";
import { formatTime } from "../../../common/js/myFun";
import { mapState } from "vuex";
export default {
  name: "Mine",
  data() {
    return {
      integral: "",
      orderList: [],
      chargeList: [],
      form: {
        userId: "",
        username: "",
        gender: "",
        address: ""
      },
      form2: {
        userId: "",
        oldPwd: "",
        newPwd: ""
      }
    };
  },
  computed: {
    ...mapState(["userInfo2"])
  },
  mounted() {
    if (this.userInfo2) {
      let { id } = this.userInfo2;
      this.form.userId = id;
      this.form2.userId = id;
    }
    this.getUserInfo();
    this.getUserOrders();
    this.getUserRecharges();
  },
  methods: {
    getUserInfo() {
      getUserInfo({
        userId: this.form.userId
      }).then(res => {
        let { username, address, integral, gender } = res.result.userInfo;
        this.form.username = username;
        this.form.address = address;
        this.form.gender = gender.toString();
        this.integral = integral;
      });
    },
    // 修改用户信息
    onSubmit() {
      saveUserInfo(this.form).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.data,
            type: "success"
          });
        } else {
          this.$message({
            message: res.data,
            type: "error"
          });
        }
      });
    },
    revisePwd() {
      revisePwd(this.form2).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.data,
            type: "success"
          });
        } else {
          this.$message({
            message: res.data,
            type: "error"
          });
        }
      });
    },
    getUserOrders() {
      getUserOrders({
        userId: this.form.userId
      }).then(res => {
        if (res.code === 200) {
          let listArr = [];
          res.result.orderList.forEach(item => {
            item.orderInfo.createdAt = formatTime(item.orderInfo.createdAt);
            if (item.bikeInfo) {
              item.orderInfo.bikeTitle = item.bikeInfo.title;
              item.orderInfo.integral = item.bikeInfo.integral;
              item.orderInfo.kind = item.bikeInfo.kind;
            }
            listArr.push(item.orderInfo);
          });
          this.orderList = listArr;
        } else {
          this.$message({
            message: res.data,
            type: "error"
          });
        }
      });
    },
    // 充值记录
    getUserRecharges() {
      getUserRecharges({
        userId: this.form.userId
      }).then(res => {
        if (res.code === 200) {
          let chargeArr = [];
          res.result.rechargeList.forEach(item => {
            item.rechargeInfo.createdAt = formatTime(
              item.rechargeInfo.createdAt
            );
            chargeArr.push(item.rechargeInfo);
          });
          this.chargeList = chargeArr;
        } else {
          this.$message({
            message: res.data,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.user-center {
  width: 1200px;
  min-height: 1000px;
  overflow: hidden;
  margin: 0 auto;

  .border-card {
    margin-top: 50px;
  }
}
</style>
